<template>
  <Drawer :visible="visible" title="查看详情" size="large" :destroyOnClose="true" @ok="handleOk" @close="handleCancel">
    <div class="centent">
      <Form
        ref="formRef"
        :model="formState"
        :labelCol="{ style: { width: '80px' } }"
        :wrapper-col="{ style: { width: '180px' } }"
      >
        <FormItem label="应用" name="appId">
          <span>{{ formState.appName }}</span>
        </FormItem>
        <FormItem label="角色名称" name="name">
          <span>{{ formState.name }}</span>
        </FormItem>
        <FormItem label="角色编码" name="code">
          <span>{{ formState.code }}</span>
        </FormItem>
        <FormItem label="状态" name="status" valuePropName="formState.status">
          <span>{{ formState.status ? '启用' : '停用' }}</span>
        </FormItem>
        <FormItem label="角色描述" name="description">
          <span>{{ formState.description }}</span>
        </FormItem>
        <FormItem label="应用资源" name="resourceIdList">
          <Tree
            :showLine="false"
            checkable
            disabled
            :replaceFields="{ key: 'id', title: 'name', children: 'children' }"
            style="font-weight: bolder; text-align: right"
            v-model:checkedKeys="formState.resourceIdList"
            :tree-data="treeData"
            :load-data="getChildData"
            :autoExpandParent="false"
            checkStrictly
            @check="handleSelect"
          >
            <template #title="{ title, type }">
              <span>
                <Tag color="pink" v-if="type === 'MENU'">{{ type }}</Tag>
                <Tag color="blue" v-if="type === 'ELEMENT'">{{ type }}</Tag>
                {{ title }}
              </span>
            </template>
          </Tree>
        </FormItem>
      </Form>
    </div>
  </Drawer>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import { Form, Drawer, FormItem, Tree, TreeProps, Tag } from 'ant-design-vue';
import { getAppResourceTree, getSaaSRoleDetail } from '/@/api/authority-mgmt/role';

let props = defineProps({
  visible: Boolean,
  type: Number,
  data: Object,
});
let visible = ref(props.visible);
let type = ref(props.type);

const formRef = ref();
interface Role {
  id: string;
  appId: string;
  name: string;
  code: string;
  status: boolean;
  description: string;
  resourceIdList: string[];
  appName: string;
}

let formState = reactive<Partial<Role>>({});
const treeData = ref<TreeProps['treeData']>([]);

function resetForm() {
  formRef.value.resetFields();
}
const emit = defineEmits(['close']);
const handleCancel = () => {
  resetForm();
  emit('close', 'close');
};
const getAppName = (appName) => {
  formState.appName = appName;
};
async function getRoleDetail() {
  // eslint-disable-next-line camelcase
  const res = await getSaaSRoleDetail({ role_id: props.data?.id });
  formState.id = props.data?.id;
  formState.appId = res.appId;
  formState.code = res.code;
  formState.description = res.description;
  formState.name = res.name;
  formState.status = res.status;
  getAppResourceTree({ appId: formState.appId }).then((info) => {
    treeData.value = info;
    formState.resourceIdList = res.resourceIdList;
  });
}

watch(props, async (newValue) => {
  visible.value = newValue.visible;
  type.value = newValue.type;
  if (newValue.visible) {
    getRoleDetail();
  }
});
defineExpose({ getAppName });
</script>
